<template>
  <div class="userInfo">
    <div class="d-flex justify-content-between">
      <div>
        <div class="leftBar d-flex">
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="院系">
              <el-select v-model="searchForm.collegeName" placeholder="请选择院系">
                <el-option value="undefined" label="全部" key="undefined"></el-option>
                <el-option
                    v-for="item in collegeData"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="GetAdminInfo">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="mb-2">
        </div>
      </div>
      <div class="rightBar">
        <el-button @click="insertInto" type="primary" icon="el-icon-plus" circle></el-button>
        <el-popover
            placement="top"
            width="160"
            v-model="visibleAll">
          <p>确定全部删除吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visibleAll = false">取消</el-button>
            <el-button type="primary" size="mini" @click="handleClickDel(undefined)">确定</el-button>
          </div>
          <el-button slot="reference" type="danger" icon="el-icon-delete" data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     title="全部删除" circle></el-button>
        </el-popover>

      </div>
    </div>
    <div class="userList">
      <el-table
          ref="singleTable"
          :data="userData"
          highlight-current-row
          :header-cell-style="{'text-align':'center'}"
          :cell-style="cellStyle"
          border
          style="width: 100%;background-color: white">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="账号：">
                <span>{{ props.row.account }}</span>
              </el-form-item>
              <el-form-item label="密码：">
                <span>{{ props.row.pwd }}</span>
              </el-form-item>
              <el-form-item label="姓名：">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="职称：">
                <span>{{ props.row.technical }}</span>
              </el-form-item>
              <el-form-item label="权限：">
                <span>{{ props.row.role|roles }}</span>
              </el-form-item>
              <el-form-item label="学校：">
                <span>{{ props.row.schoolName|school }}</span>
              </el-form-item>
              <el-form-item label="学院：">
                <span>{{ props.row.collegeName|college }}</span>
              </el-form-item>
              <el-form-item label="创建时间：">
                <span>{{ props.row.createTime }}</span>
              </el-form-item>
              <el-form-item label="修改时间：">
                <span>{{ props.row.updateTime }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            type="index"
            label="序号"
            width="50">
        </el-table-column>
        <el-table-column
            property="account"
            label="账号"
            width="120"
        >
        </el-table-column>
        <el-table-column
            property="pwd"
            label="密码"
            width="130"
            :show-overflow-tooltip='true'>
        </el-table-column>
        <el-table-column
            property="name"
            label="姓名"
            width="120">
        </el-table-column>
        <el-table-column
            property="technical"
            label="职称"
            width="180">
        </el-table-column>
        <el-table-column
            label="权限"
            width="180">
          <template slot-scope="scope">
            {{ scope.row.role|roles }}
          </template>
        </el-table-column>
        <el-table-column
            property="createTime"
            label="创建时间"
            width="130">
        </el-table-column>
        <el-table-column
            property="updateTime"
            label="更新时间"
            width="130">
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-button type="success" size="mini" class="m-1" @click="handleClickEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="handleClickDel(scope.row._id)" class="m-1" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="mt-3"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
      <el-dialog
          class="userListDialog"
          :title="dialogTitle"
          v-if="dialogVisible"
          :visible.sync="dialogVisible"
          width="30%">
        <EditAdmin ref="EditAdmin" @updateOk="GetAdminInfo"></EditAdmin>
        <span slot="footer" class="dialog-footer">
           <el-button @click="dialogVisible = false">取 消</el-button>
           <el-button type="primary" @click="EditConfirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import admin from "../../../api/admin";
import school from "../../../filter/school"
import college from "../../../filter/college";
import major from "../../../filter/major";
import EditAdmin from "./EditAdmin";
import roles from "../../../filter/roles";
import init from "../../../api/init";

export default {
  name: "admin",
  components: {
    EditAdmin
  },
  data() {
    return {
      limit: 30,
      skip: 0,
      page: 1,
      size: 5,
      total: 1,
      userData: [],
      dialogTitle: '',
      dialogVisible: false,
      searchForm: {
        name: '',
        collegeName: 'undefined',
      },
      collegeData: init.college,
      visibleAll: false
    }
  },
  filters: {
    school, college,
    major, roles
  },
  created() {
    this.GetAdminInfo()
  },
  methods: {

    // 添加按钮
    insertInto() {
      localStorage.clear()
      this.dialogVisible = true
      this.dialogTitle = '添加管理员用户'
    },

    // 更新用户数据
    EditConfirm() {
      this.$refs.EditAdmin.UpdateAdminUserInfo()
    },

    // 修改
    handleClickEdit(row) {
      localStorage.setItem("edit", JSON.stringify(row))
      this.dialogVisible = true
      this.dialogTitle = "修改用户信息"
    },


    handleSizeChange(size) {
      this.size = size
      this.limit = size
      this.GetAdminInfo()
    },
    handleCurrentChange(size) {
      this.page = size
      this.GetAdminInfo()
    },
    cellStyle() {
      return {
        'text-align': 'center',
        'overflow': 'hidden',
        'text-overflow': 'ellipsis',
        'white-space': 'nowrap',
      }
    },
    GetAdminInfo() {
      this.dialogVisible = false
      const param = {
        limit: this.limit,
        skip: (this.page - 1) * this.size,
        collegeName: this.searchForm.collegeName,
        name: this.searchForm.name !== "" ? this.searchForm.name : undefined,
      }
      admin.GetAdminInfo(param).then(r => {
        let data = r.data.data.admin
        data.forEach(v => {
          v.createTime = this.$moment(v.createTime).format('YYYY年MM月DD日 a hh:mm:ss');
          v.updateTime = this.$moment(v.updateTime).format('YYYY年MM月DD日 a hh:mm:ss');
        })
        this.userData = data
        console.log(r.data.data.admin)
      })
    },
    //删除用户数据
    handleClickDel(id) {
      this.visible = false
      // loading加载框
      const loading = this.$loading({
        lock: true,
        text: '删除中请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const param = {
        id
      }
      admin.DelAdminUser(param).then(r => {
        loading.close();
        if (r.data.status === '200') {
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success',
          });
          this.GetAdminInfo()
        }
      }).catch(err => {
        loading.close();
        this.$message({
          showClose: true,
          message: '删除失败' + err,
          type: 'error'
        });
      })
    }
  }
}
</script>

<style scoped>
.userHeader {
  display: flex;
}

.el-input {
  width: 250px;
}

.userInfo > div:first-child {
  margin-top: 30px;
}

.delBtn {
  margin-left: 10px;
}

.userListDialog /deep/ .el-dialog__body {
  padding: 0;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>